<template>
	<div class="forgrt-password">
		<div class="wrap">
			<el-steps :active="active" simple>
				<el-step title="1 找回密码方式"></el-step>
				<el-step title="2 账号验证"></el-step>
				<el-step title="3 重设密码"></el-step>
			</el-steps>
		</div>
		<ul class="content">
			<li v-show="this.active==0">
				<a href="javascript:;" class="btn-gonext" @click="goStep1(0)">
					<i class="el-icon-s-finance"></i>
					手机找回
				</a>
				<a  href="javascript:;" class="btn-gonext" @click="goStep1(1)">
					<i class="el-icon-phone"></i>
					邮箱找回
				</a>
			</li>
			<li v-show="this.active==1">
				<div class="form1" v-if="this.getMothed==1">
					<el-form>
						<el-form-item>
							<el-input type="email" placeholder="请输入邮箱"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" class="btn-goNext">发送验证邮件</el-button>
						</el-form-item>
					</el-form>
					<a href="javascript:;" @click="getMothed=0" class="btn-changeMethod">使用手机找回密码</a>
				</div>
				<div class="form2" v-else>
					<el-form>
						<el-form-item>
							<el-input type="email" placeholder="请输入邮箱/用户名"></el-input>
						</el-form-item>

						<el-form-item>
							<el-input placeholder="请输入手机号"></el-input>
						</el-form-item>

						<el-form-item class="verify-img">
							<el-input placeholder="图形验证码"></el-input>
							<div class="img-box"></div>
						</el-form-item>

						<el-form-item class="verify-number">
							<el-input placeholder="短信验证码"></el-input>
							<el-button class="btn-getNumber"  type="info">获取验证码</el-button>
						</el-form-item>

						<el-form-item>
							<el-button type="primary" class="btn-goNext">下一步</el-button>
						</el-form-item>
					</el-form>
					<a href="javascript:;" @click="getMothed=1" class="btn-changeMethod">使用邮箱找回密码</a>
				</div>
			</li>
			<li v-show="this.active==2">
				3
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name:'forget_password',
	data() {
      return {
				active: 0,
				getMothed:0
      };
		},
	methods:{
		goStep1(method){
			this.active=1;
			this.getMothed=method;
		}
	}	
}
</script>
<style>
.forgrt-password{
	width: 70%;
	margin: 50px auto 0;
}
.btn-gonext{
	display:block;
	font-size: 30px;
	width: 50%;
	height: 100px;
	line-height: 100px;
	color: #454545;
}
.content{
	width: 50%;
	margin: 50px auto 0;
}
.content li{
	display: flex;
}
.content li .btn-gonext:hover{
	border: 1px solid #454545
}
.form1,.form2{
	width: 100%;
}
.verify-img .el-form-item__content,.verify-number .el-form-item__content{
	display: flex;
	justify-content: space-between;
}
.verify-img .el-form-item__content .el-input,.verify-number .el-form-item__content .el-input{
	width: 58%;
}
.verify-img .el-form-item__content .img-box{
	width: 40%;
	background-color: #000;
}
.verify-number .el-form-item__content .btn-getNumber{
	width: 40%
}
.btn-goNext{
	width: 100%
}
.btn-changeMethod{
	color: #454545;
}
</style>

